	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	a {
		color: #FFFFFF;
		text-decoration: none;
	}
	
	li {
		list-style: none;
	}
	/*header区域开始*/
	
	header {
		width: 100%;
		/*margin: 0 auto;*/
		z-index: 999;
		overflow: hidden;
		padding: 1% 0;
		/*background: #343A40;*/
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
	}
	
	header .logo {
		float: left;
		padding-left: 1%;
		position: relative;
	}
	
	header .logo:before {
		content: "";
		width: 100%;
		height: 2%;
		position: absolute;
		left: 50%;
		bottom: 1%;
		transform: translateX(-50%);
		background: #FFFFFF;
		animation: logo 2s linear infinite;
	}
	
	@keyframes logo {
		0% {
			width: 90%;
		}
		0%,
		25% {
			width: 60%;
		}
		,
		30%,
		50% {
			width: 80%;
		}
		,
		55%,
		100% {
			width: 90%;
		}
	}
	
	header .logo img {
		width: auto;
		height: 50px;
	}
	
	header .nav {
		float: right;
	}
	
	header .nav ul li {
		height: 50px;
		line-height: 50px;
		margin-right: 25px;
		float: left;
	}
	
	@media only screen and (min-width: 501px) and (max-width: 1200px) {}
	
	@media only screen and (max-width: 850px) {
		header {
			background: #343A40;
		}
		header .nav {
			width: 100%;
			display: none;
			background: #343A40;
		}
		header .nav ul li {
			width: 100%;
			padding-left: 3%;
			background: #343A40;
		}
		header .nav ul li:hover {
			background: rgba(0, 0, 0, 0.2);
		}
		/*锦囊*/
		.capsule {
			width: 40px;
			height: 40px;
			float: right;
			display: flex;
			padding: 0.7%;
			border: 3px solid #FFFFFF;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			margin-top: 1%;
			margin-right: 2%;
			/*background: red;*/
		}
		.capsule span {
			width: 15%;
			/*height: 80%;*/
			display: block;
			background: #FFFFFF;
		}
		.capsule span:nth-child(1) {
			height: 60%;
			animation: span1 0.5s infinite linear;
		}
		.capsule span:nth-child(2) {
			height: 80%;
			animation: span2 0.5s infinite linear;
		}
		.capsule span:nth-child(3) {
			height: 60%;
			animation: span1 0.5s infinite linear;
		}
		@keyframes span1 {
			100% {
				height: 70%;
			}
		}
		@keyframes span2 {
			100% {
				height: 90%;
			}
		}
	}
	/*header区域结束*/
	
	.banner {
		width: 100%;
		max-height: 100vh;
		overflow: hidden;
	}
	/*Slider区域开始*/
	
	.Slider {
		width: 100vw;
		max-height: 100vh;
		overflow: hidden;
		/*position: relative;*/
	}
	
	.Slider li {
		position: relative;
	}
	
	.Slider li:before {
		content: "";
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.1);
		position: absolute;
		z-index: 2;
	}
	
	.Slider .main {
		text-align: center;
		position: absolute;
		color: #FFFFFF;
		padding: 2%;
		background: rgba(0, 0, 0, 0.8);
		top: 50%;
		left: 50%;
		z-index: 99;
		transform: translate(-50%, -50%);
	}
	
	.Slider .main h1 {
		padding: 1%;
	}
	/*停止动画*/
	/*.Slider:hover .box{
				animation-play-state: paused
			}*/
	
	.Slider .box {
		width: 500vw;
		animation: Slider 10s linear infinite;
	}
	
	.Slider .box ul li {
		width: 100vw;
		float: left;
	}
	
	.Slider .box ul li img {
		width: 100%;
		height: auto;
	}
	
	@keyframes Slider {
		0% {
			margin-left: 0;
		}
		5%,
		20% {
			margin-left: -100vw;
		}
		25%,
		50% {
			margin-left: -200vw;
		}
		55%,
		75% {
			margin-left: -300vw;
		}
		80%,
		100% {
			margin-left: -400vw;
		}
	}
	
	@media only screen and (max-width: 1200px) {
		.Slider .main h1 {
			font-size: 1.6em;
		}
	}
	
	@media only screen and (max-width: 500px) {
		.Slider .main {
			border-radius: 3%;
		}
		.Slider .main h1 {
			font-size: 1.1em;
		}
		.Slider .main p {
			margin: 1%;
			font-size: 1vw;
		}
	}
	/*Slider区域结束*/
	/*2.Who we are区域开始*/
	
	.WhoWeAre {
		width: 100%;
		max-height: 100vw;
		/*overflow: hidden;*/
		position: relative;
	}
	.WhoWeAre:before{
		content: "";
		width: 100%;
		height: 2vw;
		position: absolute;
		top: 0;
		z-index: 666;
		transform: translateY(-50%);
		background: rgba(0,0,0,0.6);
		filter: blur(5px);
	}
	.WhoWeAre .top img{
		width: 100%;
		height: auto;
	}
	.WhoWeAre .bottom{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 80vw;
		height: 40vw;
		/*background: red;*/
	}
	.WhoWeAre .bottom ul{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.WhoWeAre .bottom ul li{
		width: 30%;
		padding: 2%;
		border-radius: 20px;
		background: linear-gradient(145deg, #e1e1e1, #ffffff);
		box-shadow:  1px 1px 2px #d5d5d5,-1px -1px 2px #ffffff;
		text-align: center;
		font-size: 1em;
		background: #FFFFFF;
		position: absolute;
	}
	.WhoWeAre .bottom ul li:nth-child(1){
		top: 0;
		left: 0;
	}
	.WhoWeAre .bottom ul li:nth-child(2){
		top: 0;
		right: 0;
	}
	.WhoWeAre .bottom ul li:nth-child(3){
		bottom: 0;
		left: 0;
	}
	.WhoWeAre .bottom ul li:nth-child(4){
		bottom: 0;
		right: 0;
	}
	.WhoWeAre .bottom ul li:nth-child(5){
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.WhoWeAre .bottom ul li:nth-child(6){
		top: 50%;
		left: 5%;
		transform: translateY(-50%);
		filter: blur(5px);
		width: 15vw;
		height: 5vw;
		z-index: -1;
		
	}
	.WhoWeAre .bottom ul li:nth-child(7){
		top: 50%;
		right: 0%;
		transform: translateY(-50%);
		filter: blur(5px);
		width: 25vw;
		height: 5vw;
		z-index: -1;
	}
	@media only screen and (max-width: 1200px) {
		.WhoWeAre .bottom{
			background: rgba(0,0,0,0.2);
		}
	}
	@media only screen and (max-width: 800px) {
		.WhoWeAre .bottom{
			width: 90vw;
			height: 60vw;
			font-size: 0.5em;
		}
		.WhoWeAre .bottom ul li{
		width: 33%;
		padding: 1%;
		border-radius: 2%;
	}
	
	.WhoWeAre .bottom ul li:nth-child(5){
		width: 40%;
		top: 40%;
		left: 40%;
		transform: translate(-50%,-50%);
	}
	}
	/*2.Who we are区域结束*/
	
	
	/*Service区域开始*/
	@media only screen and (max-width: 800px) {
		.Service {
		width: 80%;
	}
	}
	.Service {
		max-width: 1200px;
		margin: 0 auto;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 2%;
	}
	
	.Service .box {
		position: relative;
		width: 280px;
		height: 400px;
		margin: 2% 0;
		overflow: hidden;
	}
	
	.Service .img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		clip-path: circle(400px at center 100px);
		transition: all 0.5s;
		z-index: 2;
	}
	
	.Service .box:hover .img {
		clip-path: circle(80px at center 100px);
	}
	
	.Service .box:hover .content {
		top: 50%;
	}
	
	.Service .box img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.Service .box .content {
		padding: 1%;
		position: absolute;
		top: 20%;
		left: 0;
		right: 0;
		text-align: center;
		transition: all 0.5s;
	}
	
	.Service .box .content h2 {
		font-size: 1.3rem;
	}
	
	.Service .box .content span {
		display: block;
		padding: 1%;
		margin: 1%;
	}
	
	.Service .box .content a {
		display: block;
		margin: 2% 0;
		padding: 3%;
		background: #000000;
		color: #FFFFFF;
	}
	/*Service区域结束*/
	
	/*4.Team区域开始*/
	.Team{
		width: 100%;
		overflow: hidden;
		/*background: red;*/
		background: #343A40;
		padding: 2% 0;
	}
	.Team-box{
		max-width: 1200px;
		margin: 0 auto;
		color: #FFFFFF;
		padding: 1%;
		background: rgba(0,0,0,0.2);
		overflow: hidden;
	}
	.Team-left{
		width: 50%;
		height: 56vh;
		float: left;
		background: rgba(0,0,0,0.2);	
		
	}
	.Team-left img{
		width: 100%;
		height: auto;
	}
	.Team-right{
		width: 50%;
		float: right;
		padding: 2%;
		line-height: 3vw;
		background: rgba(0,0,0,0.2);	
	}
	@media only screen and (max-width: 1400px) {
		.Team-left{
			width: 100%;
			height: 50vw;
		}
		.Team-right{
			padding: 4% 4%;
			width: 100%;
			font-size: 1rem;
			line-height: 4.2vw;
		}
	}
	/*4.Team区域结束*/
	
	/*5.Achievement区域开始*/	
	@media only screen and (max-width: 1384px) {
		.Achievement{
			width: 100%;
			padding: 5%;
			color: #FFFFFF;
			background: #343A40;
			position: relative;
			z-index: -2;
		}
		.Achievement:before{
		content: "";
		left: 2%;
		right: 2%;
		top: 3%;
		bottom:3%;
		z-index: -1;
		background: rgba(0,0,0,0.3);
		position: absolute;
		}
		.Achievement li{
			width: 100%;
			margin: 4% 0;
			padding: 2%;
			background: rgba(0,0,0,0.3);
			text-align: center;
		}
		.Achievement li img{
			border-radius: 50%;
		}
		.Achievement li h3{
			margin: 1% 0;
		}
		.Achievement li p{
			padding: 1% 0;
		}
		.Achievement .bottom{
			display: none;
		}
	}
	@media only screen and (min-width: 1384px) {
	.Achievement{
		width: 100%;
		height: 100vh;
		background: url(../images/dom1_1200_800.jpg)no-repeat;
		background-size: 100%;
		overflow: hidden;
		position: relative;
	}
	.Achievement:before{
		content: "";
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0,0,0,0.3);
		position: absolute;
	}
	.Achievement .box{
		max-width: 1200px;
		height: 100vh;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}
		.Achievement .box ul li{
		width: 30%;
		height:45vh;
		background: red;
		text-align: center;
		position: absolute;
		padding-top: 1%;
		padding: 0 1%;
		overflow: hidden;
		color: #FFFFFF;
		border-radius: 5%;
		background: rgba(0,0,0,0.7);
	}
	.Achievement .box ul li:nth-child(1){
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		animation: Achievement 4s infinite linear;
	}
	.Achievement .box ul li:nth-child(2){
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		animation: Achievement 3s infinite linear;
	}
	.Achievement .box ul li:nth-child(3){
		left: 50%;
		top:2%;
		transform: translateX(-50%);
		height:42vh;
	}
	.Achievement .box ul li:nth-child(4){
		left: 50%;
		bottom: 2%;
		transform: translateX(-50%);
		height:50vh;
	}
	@keyframes Achievement{
		0%,25%{
			top: 50%;
		}
		25%,50%{
			top: 52%;
		}
		50%,75%{
			top: 48%;
		}
		75%,100%{
			top: 50%;
		}
	}
	.Achievement .box ul li .center:hover .top img{
		transform: scale(0.9);
	}
	.Achievement .box ul li .center:hover .top{
		height: 15vh;
	}
	.Achievement .box ul li .center:hover .bottom{
		opacity: 1;
		transform: translate(-50%,-40%);
	}
	.Achievement .box ul li .center{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.Achievement .box ul li .top{
		height: 20vh;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.8s; 
	}
	.Achievement .box ul li .top img{
		transform: scale(1.2);
		border-radius: 50%;
		transition: all 0.8s; 
	}
	.Achievement .box ul li h3{
		font-size: 1.2rem;
		margin-bottom: 3%;
	}
	.Achievement .box ul li p{
		padding: 1%;
		line-height: 4vh;
	}
	.Achievement .box ul li .bottom{
		width: 60%;
		padding: 4%;
		opacity: 0;
		border-radius: 3%;
		background: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%,101%);
		transition: all 0.8s; 
	}
	.Achievement .box ul li .bottom a{
		color: #000000;
		display: block;
		width: 100%;
		height: 100%;
	}
	}
	/*5.Achievement区域结束*/
	
	/*6.Travel Gallery 区域开始*/
	.Travel{
		width: 100%;
	}
	/*6.Travel Gallery 区域结束*/
	
	/*底部区域开始*/
	.footer {
		width: 100%;
		max-height: 700px;
		overflow: hidden;
		position: relative;
	}
	
	.footer::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 2;
		background: rgba(0, 0, 0, 0.4);
	}
	
	video {
		width: 100%;
	}
	
	.footer .content {
		padding: 2%;
		position: absolute;
		/*overflow: hidden;*/
		width: 75vw;
		top: 50%;
		left: 50%;
		text-align: left;
		background: rgba(0, 0, 0, 0.2);
		transform: translate(-50%, -50%);
		color: #FFFFFF;
		z-index: 66;
	}
	
	.footer .content-left {
		width: 40%;
		float: left;
		overflow: hidden;
	}
	
	.footer .content-right {
		width: 60%;
		float: left;
	}
	
	.footer .content li {
		padding: 1%;
		margin-top: 2%;
		/*border-top: 1px solid #FFFFFF;*/
	}
	/*.footer .content-left .Quick li{
					float: left;
				}*/
	
	.footer .content li:nth-child(1) {
		border: 0;
	}
	
	@media only screen and (max-width: 1000px) {
		.footer .content {
			font-size: 0.7rem;
			width: 90vw;
		}
		.footer .content-left .Quick li {
			float: left;
		}
		.footer .content-left {
			width: 100%;
		}
		.footer .content-right {
			position: absolute;
			width: 40%;
			right: 10%;
			top: 22%;
			display: none;
		}
	}
	/*底部区域结束*/